<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    #box1{
        width: 100px;
        height:50px;
        background: blue;
        border-radius: 0 0 50px 50px;

    }
    #box2{
        width: 100px;
        height:50px;
        background: red;
        border-radius: 50px 50px 0 0 ;

    }
    #box3{
        width: 50px;
        height:100px;
        background:chartreuse;
        border-radius: 0 50px 50px 0 ;

    }
    #box4{
        width:50px ;
        height:100px;
        background:indianred;
        border-radius: 50px 0  0 50px;
    }
    div{
        font-size: 8px;
    }
</style>
<body> 这是一个半圆
<div id="box1">

</div><br/> 这是一个半圆
<div id="box2">

</div><br/> 这是一个半圆
<div id="box3">

</div><br/> 这是一个半圆
<div id="box4">

</div><br/>
</body>
</html>